<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="vue.js"></script>
</head>
<!--条件渲染：
        1.v-if
            写法：
                1.v-if=“表达式”、
                2.v-else-if=“表达式”
                3.v-else
            适用于：切换频率较低的场景
            特点：不展示的DOM元素被移除
            注意：v-if，v-else-if，v-else一起使用，结构不能打断
        2.v-show
            写法：v-show=“表达式”
            适用于：切换频率高的场景
            特点：不展示DOM元素没被移除，仅仅隐藏

        3.备注：使用v-if时，元素可能无法获取，使用v-show一定可以获取
-->
<body>
<div id="root">
    <h2 >当前：{{n}}</h2>
    <button @click="n++">dddd</button>
<!--    使用v-show进行条件渲染，效率高-->
    <h2 v-show="n===1">welcome1</h2>
<!--    使用v-if做条件渲染,效率低,if-else不能打断-->
    <h2 v-if="n===2">welcome2</h2>
    <h2 v-else-if="n===3">welcome3</h2>
    <h2 v-else>welcome4</h2>


<!--    template只能用v-if不能用v-show-，template不会影响结构-->
<template v-if="n==1">
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
</template>


</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:"#root",
        data:{
            a:true,
            n:0

        }
    })

</script>
</html>